<template>
	<view id="ipt" ref="fen">分类</view>
	<button @click="isMy" type="default">切换</button>
	<button @click="stopWatch" type="default">停止监听</button>
</template>

<script lang="ts" setup>
	import {onMounted , ref ,readonly , reactive , watch , watchEffect} from 'vue';
	let index = ref(0)
	let ss = ref(1)
	let fen = ref(null)
	// let data = ref({
	// 	school:{
	// 		student:{
	// 			name:'ss',
	// 			age:0
	// 		}
	// 	}
	// })
	
	let data = reactive({
		school:{
			student:{
				name:'ss',
				age:0
			}
		}
	})
	onMounted(()=>{
		uni.setNavigationBarTitle({
			title:"分类"
		})
	})
	const isMy = () => {
		index.value ++;
		// ss.value++;
		// data.value.school.student.age++;  // ref
		
		data.school.student.age++;
	}
	// watch(index,(newVal , oldVal)=>{
	// 	console.log(newVal , oldVal)
	// })
	
	// watch([index,ss],(Val , oldVal)=>{
	// 	console.log(Val , oldVal)
	// })
	
	// ref
	// watch(data , (Val , oldVal)=>{
	// 	console.log(Val , oldVal)   // 监听不到
	// },{
	// 	deep:true,  // 深度监视
	// 	immediate:true // 加载就监视一次
	// })
	
	// watch(()=>data.school.student.age , (Val , oldVal)=>{
	// 	console.log(Val , oldVal)  
	// })
	
	// 无法深度监视
	const stop = watchEffect((oninvalidate)=>{
		// console.log(index.value )
		// if(index.value < 4){
		// 	console.log("找资源")
		// }else{
		// 	console.log("不找了")
		// }
		let ipt = document.querySelector("#ipt")        // 选择
		console.log(ipt)
		oninvalidate(()=>{   // 在最开始执行
			console.log("before")  
		})
		console.log(data.school.student.age)
		

	},{
		flush:"post",  // 组件更新后执行  pre 之前执行  sync 强制效果同步发生
		onTrigger(e){
			debugger; // 帮助我们调试，断点
		}
	})
	
	const stopWatch = () => stop()   // 停止监听
</script>

<style>
</style>
